<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         @charset "utf-8";
/* 禁用iPhone中Safari的字号自动调整,防止正着放和横着放 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
/* 去除iPhone中默认的input样式 */
input[type="submit"],
input[type="reset"],
input[type="button"] {
  -webkit-appearance: none;
  resize: none;
}
/* 取消链接高亮  */
body,
div,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 设置HTML5元素为块 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
/* 图片自适应 */
img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  border: none;
  -ms-interpolation-mode: bicubic;
  /*为了照顾ie图片缩放失真*/
}
/* 初始化 */
body,
ul,
li,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
input,
textarea,
select,
p,
dl,
dt,
dd,
a,
img,
button,
form,
table,
th,
tr,
td,
tbody,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
  font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
}
em,
i {
  font-style: normal;
}
strong {
  font-weight: normal;
}
a {
  text-decoration: none;
  color: #333;
}
a:active {
  color: #f60;
}
/* 按下状态，手机是没有hover只有按下效果 */
ul,
ol {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}
body {
  font-size: 15px;
  font-family: '微软雅黑';
  color: #a6a6a6; 
  }
  .box1{
    margin-left: 140px;
    height: 100px;
    width: 300px;
    float: left;
    padding-top: 13px;
  }
  .box2{
    width: 100%;
    height: 100px;
    overflow: hidden;
}
/* .a1{
    color:#7bbfea;
    padding-bottom:15px; 
    border-bottom:2px solid #7bbfea;
} */
ul{
    height: 135px;
    width: 516px;
    /* margin-left: 800px; */
    float: right;
    margin-right: 100px;
    /* border: 1px solid black; */
}
li{
    float: left;
    font-size: 20px;
    color:#242424;
    line-height: 95px;
    text-align: center;
    width: 86px;
}
.box3{
  width: 100%;
  height: 90px;
  border: 1px solid #a5a5a5;
}
.small1{
  width: 5%;
  height: 60px;
  /* border: 1px solid black; */
  float: left;
  color: #a5a5a5;
  text-align: center;
  line-height: 60px;
  margin-left: 30px;
  margin-top: 20px;
  font-size: 18px;
}
.small2{
  width: 6%;
  height: 30px;
  /* border: 1px solid black; */
  float: left;
  color:#7bbfea;
  padding-bottom:40px; 
  border-bottom:2px solid #7bbfea;
  text-align: center;
  line-height: 60px;
  margin-left: 200px;
  margin-top: 20px;
  font-size: 18px;
}
.box4{
  margin-top: 50px;
  width: 100%;
  height: 300px;
  /* border: black 1px solid; */
}
.small3{
  height: 350px;
  width: 80%;
  /* border: 1px solid black; */
  margin: 0 auto;
  border-bottom:1px dashed;
}
.small4{
  width: 65%;
  height: 270px;
  float: left;
  /* border: 1px solid black; */
  padding-top: 80px;
  margin-left: 20px;
}
.small5{
  width: 30%;
  height: 330px;
  /* border: 1px solid black; */
  float: left;
  line-height: 350px;
  padding-top: 20px;
}
.small6{
  width: 150px;
  height: 40px;
  background-color: #7bbfea;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  color: white;
  position: relative;
  top: 75px;
}
.small7{
  width: 150px;
  height: 40px;
  background-color: #7bbfea;
  border-radius: 5px;
  text-align: center;
  line-height: 40px;
  color: white;
  position: relative;
  top: 53px;
}
.box5{
  width: 100%;
  height: 80px;
  /* border: 1px solid black; */
  margin-top: 140px;
}
.box6{
  float:left;
  height: 30px;
  width: 80px;
  border: 1px solid #a5a5a5;
  text-align: center;
  line-height: 30px;
  /* margin-left: 200px; */
  /* margin-top: 200px; */
  color: #242424;
}
.box7{
  width: 530px;
  height: 30px;
  margin: 0 auto;
  /* border: 1px solid black; */
  /* margin-left: 30px; */
}
.box6:hover{
  background-color: #7bbfea;
  color: white;
}
.boxx{
    width: 90%;
    height: 321px;
    /* border: 1px solid black; */
    margin: 0 auto;
}
.box8{
    background-color: #333e50;
    width: 100%;
    height: 321px;
    margin-top: 50px;
}
.last1{
    font-size: 27px;
    color: #e2f7fb;
}
.special{
    width: 15%;
    height: 200px;
    /* border: 1px solid black; */
}
.special2{
    height: 200px;
    width: 30%;
    float: left;
    text-align: center;
    font-size: 20px;
    /* padding-top: 5px; */
}
.z3{
    width: 60%;
    height: 80px;
    /* border: black 1px solid; */
    text-align: center;
    line-height: 80px;
    color: #e2f7fb;
    float: left;
    /* padding-bottom: 20px; */
}
.z4{
    /* padding-bottom: 30px; */
    position: relative;
    right: 180px;
    top: 35px;
    color: #e2f7fb;
    font-size: 13px;
    float:left;
    /* border: 1px solid red; */
    width: 8%;
    height: 10px;
}
.z5{
    width: 20%;
    height:60px;
    float:left;
    padding-left: 20px;
    /* border: 1px solid black; */
    margin-left: 200px;
}
.z6{
    width: 9%;
    height: 40px;
    /* border: 1px solid black; */
    margin-left: 20px;
    float: left;
    padding-top: 17px;
    /* padding-left: 5px; */
}
.box9{
    background-color: #01b0f1;
    width: 100%;
    height: 80px;
    /* padding-bottom: 30px; */
}
dl{
    margin-left: 50px;
    padding-top:76px;
    width: 8%;
    height: 200px;
    /* border: 1px solid black; */
    /* text-align: center; */
    float: left;
}
.boxq{
  float:left;
  height: 30px;
  width: 80px;
  border: 1px solid #a5a5a5;
  text-align: center;
  line-height: 30px;
  /* margin-left: 200px; */
  /* margin-top: 200px; */
  color: white;
  background-color: #7bbfea;
}
    </style>
</head>
<body>
    <div class="box2">
        <div class="box1">
        <img src="./photo/dl_logo.png" alt="">
        </div>
        <ul>
            <li><span class="a1">首页</span></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">案例</a></li>
            <li><a href="#">联系</a></li>
            <li><img src="./Photo/fdj.png" alt=""></li>
        </ul>
        </div>
        <img src="./Photo/banner6.jpg" alt="">
        <div class="box3">
          <div class="small2">企业新闻</div>
          <div class="small1"><a href="#">媒体报道</a></div>
          <div class="small1"><a href="#">其他动态</a></div>
        </div>
        <div class="box4">
          <div class="small3">
            <div class="small5"><img src="./Photo/news1.jpg" alt=""></div>
          <div class="small4"><font size="5" color="#242424">中科汇联受邀进校园，小学生玩起机器人</font>
            <p>2018-03-25</p>
            <br>
            <font color="#a1a3a6" size="3"><p>区别于填鸭式的说教，当科技走进校园，走进一群充满好奇心的小学生身边，让他们近距</p>
            <p>离的体验科技的神器与其背后的故事，会是一幅什么样的场景呢?</p></font>
            <div class="small6">
              <!-- <a href="#"> -->
              查看详情+
              <!-- </a> -->
            </div>
          </div>
        </div>
        </div>
        <div class="box4">
          <div class="small3">
            <div class="small5"><img src="./Photo/news2.png" alt=""></div>
          <div class="small4"><font size="5" color="#242424">一本正经的胡说八道 互联网公司愚人节黑料科技逗你玩</font>
            <p>2018-03-25</p>
            <br>
            <font color="#a1a3a6" size="3"><p>每年一到愚人节，各大互联网公司都玩的很嗨，推出描述得煞有介事，难辨真假的各种产品今</p>
            <p>年也不例外。今天，大家就跟爱客服一起来看看今年互联网公司的愚人节“黑科技”吧！</p></font>
            <div class="small6">
              <!-- <a href="#"> -->
              查看详情+
            <!-- </a> -->
            </div>
          </div>
        </div>
        </div>
        <div class="box4">
          <div class="small3">
            <div class="small5"><img src="./Photo/news3.png" alt=""></div>
          <div class="small4"><font size="5" color="#242424">全球最尖端智能SUV是如何炼成的 解密特斯拉model x机器人生成过程</font>
            <p>2018-03-25</p>
            <br>
            <font color="#a1a3a6" size="3"><p>毋庸置疑，特斯拉电动汽车就是汽车界的苹果，从全球首款豪华电动跑车，到汽车的直销模式：</p>
            <p>从全球最大的汽车电动工厂，到90秒换电池大法：这个来自硅谷的汽车门外汉从一开始就以颠覆者</p>
            <p>的姿态出现，一跃成为全球电动汽车行业的领军者</p>
          </font>
            <div class="small7">
              <!-- <a href="#"> -->
              查看详情+
            <!-- </a> -->
            </div>
          </div>
        </div>
        </div>
        <div class="box4">
          <div class="small3">
            <div class="small5"><img src="./Photo/news4.png" alt=""></div>
          <div class="small4"><font size="5" color="#242424">都说阅读改变人生，看到这儿不得不信了</font>
            <p>2018-03-25</p>
            <br>
            <font color="#a1a3a6" size="3"><p>从小到大，“饱受”九年义务教育“摧残”的我们就被老师们教导要多读书，读好书，也在老师</p>
            <p>的“助力”下读了不少书和文章，大多数的时候我们看了太多的鸡汤励志文章，也对人生充满了希望</p>
            <p>，然而最终决定我们出路的往往是硬性的考试</p>
          </font>
            <div class="small7">
              <!-- <a href="#"> -->
              查看详情+
            <!-- </a> -->
            </div>
          </div>
        </div>
        </div>
        <div class="box5">
          <div class="box7">
          <div class="box6"><a href="#">首页</a></div>
          <div class="box6"><a href="#">上一页</a></div>
          <div class="boxq">1</div>
          <div class="box6"><a href="#">2</a></div>
          <div class="box6"><a href="#">下一页</a></div>
          <div class="box6"><a href="#">末页</a></div>
        </div>
        </div>
        <div class="box8">
          <div class="boxx">
          <dl>
              <dt class="last1">产品</dt>
              <dt>
                  &nbsp;
              </dt>
              <dt>产品介绍</dt>
              <p></p>
              <dt>产品优势</dt>
          </dl>
          <dl>
              <dt class="last1">服务</dt>
              <dt>&nbsp;</dt>
              <dt>产品手册</dt>
              <dt>服务理念</dt>
              <dt>服务协议</dt>
              <dt>法律声明</dt>
          </dl>
          <dl>
              <dt class="last1">案例</dt>
              <dt>&nbsp;</dt>
              <dt>客户案例</dt>
              <dt>合作伙伴</dt>
          </dl>
          <dl>
              <dt class="last1">新闻</dt>
              <dt>&nbsp;</dt>
              <dt>产品动态</dt>
              <dt>媒体报道</dt>
              <dt>其他动态</dt>
          </dl>
          <dl class="special">
              <dt class="last1">联系</dt>
              <dt>&nbsp;</dt>
              <dt>客服热线：400-777-9908</dt>
              <dt>邮箱：hezuo@ciopass.com</dt>
              <dt>周一至周日 9:00-18:00</dt>
          </dl>
          <dl class="special2"><img src="./Photo/dl_footer_logo.png" alt="">
              <dt>&nbsp;</dt>
              <dt>专注于营销与客服的智能语言机器人<dt>
          </dl>
      </div>
      </div>
      <div class="box9">
          <div class="z3">©2017-2018广州鼎力互联网软件服务有限公司版权所有&nbsp;粤ICP备18046524</div>
          <div class="z4">技术支持：企泰科技</div>
          <div class="z5">
              <div class="z6"><a href="#"><img src="./Photo/wx.png" alt=""></a></div>
              <div class="z6"><a href="#"><img src="./Photo/wb.png" alt=""></a></div>
              <div class="z6"><a href="#"><img src="./Photo/xf.png" alt=""></a></div>
              <div class="z6"><a href="#"><img src="./Photo/share.png" alt=""></a></div>
          </div>
      </div>
</body>
</html>